<template>
    <div class="barwrap">
        <div class="barbody" :class="barconcolor"><div class="barcon" :style="{width: val}" :class="barconcolor"></div></div>
    </div>
</template>

<script>
    export default {
        name: "progressbar",
        computed:{
            barconcolor(){
                if(this.relval<80){
                    return {red:true}
                }else if(this.relval>=80 && this.relval<90){
                    return {yellow:true}
                }else {
                    return {green:true}
                }

            },
            relval(){
                return parseFloat(this.val)||0;
            }
        },
        props:['val']
    }
</script>

<style scoped lang="less">
    .barwrap{
        height:14px;
        width: 55%;
        display: flex;
        justify-content: flex-end;

        .barbody{
            width: 90%;
            height: 12px;
            position: relative;
            opacity: 0.6;
            .barcon{
                position: absolute;
                left: 0;
                top: -1px;
                height: 100%;
            }
        }


        .red{
            background-color: rgba(248,84,32,0.6);
            border-top: 1px solid rgba(119,42,35,0.6);
            border-bottom: 1px solid rgba(119,42,35,0.6);
        }
        .green{
            background-color: rgba(32,161,252,0.6);
            border-top: 1px solid rgba(17,95,160,0.6);
            border-bottom: 1px solid rgba(17,95,160,0.6);
        }
        .yellow{
            background-color: rgba(252,191,22,0.6);
            border-top: 1px solid rgba(148,123,31,0.6);
            border-bottom: 1px solid rgba(148,123,31,0.6);
        }
        .barcon.red{
            background-color: rgba(248,84,32,1);
            border-top: 1px solid rgba(119,42,35,1);
            border-bottom: 1px solid rgba(119,42,35,1);
        }
        .barcon.green{
            background-color: rgba(32,161,252,1);
            border-top: 1px solid rgba(17,95,160,1);
            border-bottom: 1px solid rgba(17,95,160,1);
        }
        .barcon.yellow{
            background-color: rgba(255,255,0,1);
            border-top: 1px solid rgba(148,123,31,1);
            border-bottom: 1px solid rgba(148,123,31,1);
        }
    }
</style>
